<template>
  <div class="mod-config box_check">
    <basic-container>
      <!--新增跳转-->
      <div class="boxsty zhiBiao">
        <div
          v-if="
            zhibiaoForm.enter == 0 ||
            zhibiaoForm.enter == 2 ||
            zhibiaoForm.enter == 3
          "
        >
          <div :height="searchheight">
            <span
              style="float: right; margin-top: -30px; cursor: pointer"
              @click="searchchangeadvanced"
              >{{ searchadvanced ? "收起" : "展开" }}
              <i
                :class="
                  searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                "
              />
            </span>
            <div v-show="searchadvanced">
              <div class="flex">
                <div class="mt20">
                  <el-row>
                    <el-col :span="24">
                      <el-form
                        :model="form"
                        label-width="120px"
                        label-position="right"
                      >
                        <el-col :span="12">
                          <el-form-item label="合同名称">
                            <el-input
                              :disabled="zhibiaoForm.disabled"
                              v-model="form.contractName"
                              placeholder="合同名称"
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="审核流程">
                            <el-select
                              :clearable="true"
                              v-model="form.auditProcess"
                              placeholder="请选择审核流程"
                              style="width: 100%"
                              :disabled="zhibiaoForm.disabled"
                              class="xiaLa"
                            >
                              <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item label="合同有效期">
                            <el-date-picker
                              v-model="form.htYxqq"
                              type="date"
                              :disabled="zhibiaoForm.disabled"
                              style="width: 48%"
                              placeholder="选择日期"
                            >
                            </el-date-picker>
                            <span
                              style="
                                width: 4%;
                                display: inline-block;
                                text-align: center;
                              "
                              >至</span
                            >
                            <el-date-picker
                              v-model="form.htYxqz"
                              style="width: 48%"
                              :disabled="zhibiaoForm.disabled"
                              type="date"
                              placeholder="选择日期"
                            >
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="签订日期">
                            <el-date-picker
                              v-model="form.signDate"
                              style="width: 100%"
                              :disabled="zhibiaoForm.disabled"
                              type="date"
                              placeholder="选择日期"
                            >
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="签订级别">
                            <el-select
                              :clearable="true"
                              v-model="form.signLevel"
                              placeholder="请选择签订级别"
                              style="width: 100%"
                              :disabled="zhibiaoForm.disabled"
                              class="xiaLa"
                            >
                              <el-option
                                v-for="item in leveList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="多人合同模式">
                            <el-select
                              :clearable="true"
                              v-model="form.multiMode"
                              placeholder="请选择多人合同模式"
                              style="width: 100%"
                              :disabled="zhibiaoForm.disabled"
                              class="xiaLa"
                            >
                              <el-option
                                v-for="item in modelList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="考核周期">
                            <el-select
                              :clearable="true"
                              v-model="form.contractCycle"
                              placeholder="请选择考核周期"
                              style="width: 100%"
                              :disabled="zhibiaoForm.disabled"
                              class="xiaLa"
                            >
                              <el-option
                                v-for="item in periodList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="zhibiaoForm.enter == 0">
                          <el-form-item>
                            <el-button type="primary">批量添加公式</el-button>
                            <el-button type="primary" @click="showZhibiaoTable"
                              >指标库</el-button
                            >
                            <el-select
                              :clearable="true"
                              v-model="form.gzZt"
                              placeholder="请选择考核周期"
                              style="
                                width: 120px;
                                margin-right: 10px;
                                margin-left: 10px;
                              "
                              class="xiaLa"
                            >
                              <el-option
                                v-for="item in zhiList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              >
                              </el-option>
                            </el-select>
                            <el-button type="primary">复用模板</el-button>
                            <el-button type="primary" @click="saveData()"
                              >保存</el-button
                            >
                          </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="zhibiaoForm.enter == 0">
                          <el-form-item label="发约人">
                            {{ form.fayueName }}
                          </el-form-item>
                        </el-col>
                        <el-col :span="24" v-if="zhibiaoForm.enter == 0">
                          <el-form-item label="受约人">
                            {{ form.shouyueName }}
                          </el-form-item>
                        </el-col>
                      </el-form>
                    </el-col>
                  </el-row>
                  <div style="margin-bottom: 20px">
                    <el-button
                      type="primary"
                      v-if="zhibiaoForm.enter == 1 || zhibiaoForm.enter == 2"
                      @click="setenter()"
                      >新增</el-button
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--指标编辑-->
        <div>
          <!-- <div class="table-header-table-box" v-if="zhibiaoForm.enter == 1">
            <table>
              <tbody>
                <tr>
                  <td
                    colspan="3"
                    style="height: 40px; line-height: 40px; font-size: 24px"
                  >
                    合同名称：{{ hetong.contractName }}(得分：{{ dfdata }})
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="text-left">
                      发约人姓名：{{ hetong.fayueName }}
                    </div>
                  </td>
                  <td>
                    <div class="text-left" v-if="hetong.type == 1">
                      受约人姓名：{{ hetong.shouyueName }}
                    </div>
                    <div class="text-left" v-if="hetong.type == 2">
                      机构：{{ hetong.jigouName }}
                    </div>
                  </td>
                  <td>
                    合同有效期：{{ hetong.htYxqq
                    }}<span class="mg-0-10">至</span>{{ hetong.htYxqz }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <div class="flex text-left">
                      <div>职务：</div>
                      <div>
                        <div v-for="item in cutout(hetong.fayueZhiwu)">
                          {{ item }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="flex text-left">
                      <div>职务：</div>
                      <div>
                        <div v-for="item in cutout(hetong.shouyueZhiwu)">
                          {{ item }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <td>签订日期：{{ hetong.signDate }}</td>
                </tr>
              </tbody>
            </table>
          </div> -->
          <div class="check_header">
            <div class="portrait">
              <!-- <div style="text-align:center;"><i class="el-icon-picture-outline" style="font-size: 90px;line-height: 200px;"></i></div> -->
              <!-- https://img0.baidu.com/it/u=1616792236,261472305&fm=26&fmt=auto -->
              <img v-if="hetong.srcUrl==''" src="/img/moren.png" alt="">
               <img else :src="hetong.srcUrl" alt="">
            </div>
            <div>
              <div class="con_1"><div>考核名称：</div>
                <el-tooltip class="item" effect="dark" :content="hetong.contractName" placement="top-start">
                    <div style="text-overflow: ellipsis;width: 240px;overflow: hidden; height: 30px;white-space:nowrap;">{{hetong.contractName}}</div>
                </el-tooltip>
              </div>
              <div class="con_1" style="font-weight: 900;"><div>受约人姓名：</div><span>{{ hetong.shouyueName }}</span></div>
              <div class="con_1"><div>受约人职务：</div><div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" v-for="item in cutout(hetong.shouyueZhiwu)">{{ item }} </div></div>
              <div class="con_1"><div>合同有效期：</div><div>{{ hetong.htYxqq}}<span class="mg-0-10">至</span>{{ hetong.htYxqz }}</div></div>
              <div class="con_1"><div>发约人姓名:</div><div>{{hetong.fayueName}}</div></div>
              <div class="con_1"><div>合同状态:</div><div>{{cutout2(hetong.contractAuditStatus)}}</div></div>
            </div>
<!--            图标-->
            <div style="width: 30%" class="zhibiao-carousel-box">
              <el-carousel indicator-position="outside" :interval="interval" height="230">
                <el-carousel-item v-for="item in 3" :key="item"  height="230">
                  <div v-if="item==1">
                    <div class="righttop" id="ckecharts" ></div>
                  </div>
                  <div v-if="item==2">
                    <div class="righttop" id="linecharts">折线图</div>
                  </div>
                  <div v-if="item==3">
                    <div class="righttop" id="piecharts">饼图</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div>
              <div class="defen">
                {{dfdata}}分
              </div>
              <div style="text-align: center;" v-if="zhibiaoForm.enter == 1">
                <!-- <el-button type="primary" @click="showZhibiaoTable" v-if="kuShow"
                  >指标库</el-button
                > -->
                <el-button type="primary" @click="exportExcel">导出</el-button>
                <el-button type="primary" @click="close">返回</el-button>
              </div>
            </div>
          </div>
          <el-divider></el-divider>
          <el-table
            :data="dataList"
            style="width: 100%"
            height="60vh"
            v-if="zhibiaoForm.enter == 0 || zhibiaoForm.enter == 1"
            @load="dataListLoading"
            class="box_check"
            :span-method="objectSpanMethod"
          >
            <!-- <el-table-column type="selection" width="55" header-align="center" align="center"></el-table-column> -->
            <el-table-column
              type="index"
              width="80"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="zhibiaoType"
              label="指标类别"
              min-width="120"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="zhibiaoName"
              label="指标名称"
              min-width="120"
              header-align="center"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="weight"
              label="权重(%)"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="targetValue"
              label="目标值"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="dataProvider"
              label="数据提供部门/人"
              min-width="120"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.tgLx=='2'">{{scope.row.targetUserName}}</span>
                <span v-else>{{scope.row.dataProvider}}</span>
              </template>
            </el-table-column>
             <el-table-column
              prop="ytbSz"
              label="填报值(预)"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="tbSz"
              label="填报值"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
             <el-table-column
              prop="zbDf"
              label="得分"
              min-width="120"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
          <el-dialog title="指标库" :visible.sync="dialogVisible" width="80%">
            <zhibiaoTable
              ref="zhibiaoRef"
              :hetongId="hetongId"
              @func="getRow"
            ></zhibiaoTable>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addZhibiao">添 加</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
          </el-dialog>
          <el-col
            :span="24"
            style="text-align: center; margin-top: 20px"
            v-if="zhibiaoForm.enter == 2"
          >
            <el-button type="primary" @click="tongguo(4)">同意</el-button>
            <el-button type="primary" @click="tongguo(3)">驳回</el-button>
          </el-col>
          <el-col
            :span="24"
            style="text-align: center; margin-top: 20px"
            v-if="zhibiaoForm.enter == 3"
          >
            <el-button type="primary" @click="close">返回</el-button>
          </el-col>
        </div>
      </div>
    </basic-container>
  </div>
</template>

<script>
import {
  fetchList,
  addObj,
  getObj,
  delObj,
  putObj,
  getList,
  getFormula,
  saveHtData,
} from "@/api/hetongrenwu/hetongyeji/hetongzb";

import zhibiaoTable from "@/views/hetongrenwu/hetong/hetongyeji/zhibiaoTable-chakan";
import { saveZB } from "@/api/hetongrenwu/zhibiaoTable";
import {
  setwbsh,
  chakanExportExcel,
} from "@/api/hetongrenwu/hetongyeji/hetongnd";
import { exportExcel, checkSign } from "@/api/hetongrenwu/hetongjghz";
import { jgtbExportExcel }  from '@/api/hetongrenwu/hetongjgtb';

import * as echarts from 'echarts';
export default {
  name: "zhibiao-form",
  props: {
    zhibiaoForm: {
      disabled: false,
    },
    hetongId: Number,
    hetong: {},
  },
  components: { zhibiaoTable },
  data() {
    return {
      kuShow: true,
      dialogVisible: false,
      formulaOptions: [],
      dataListLoading: false,
      form: {},
      dfdata: "",
      options: [
        { label: "2021年全员绩效考核通用流程", value: "1" },
        { label: "2021年第一季度技术合同流程", value: "2" },
      ],
      leveList: [
        { value: "1", label: "一级合同" },
        { value: "2", label: "二级合同" },
        { value: "3", label: "三级合同" },
        { value: "4", label: "四级合同" },
        { value: "5", label: "五级合同" },
      ],
      modelList: [
        { value: "0", label: "生成多个合同" },
        { value: "1", label: "多人共享业绩" },
      ],
      periodList: [
        { value: "1", label: "月度" },
        { value: "2", label: "季度" },
        { value: "3", label: "年度" },
      ],
      peopleSend: ["张三"],
      promisee: ["李四"],
      zhiList: [
        { value: "模板导出", label: "模板导出" },
        { value: "模板导入", label: "模板导入" },
      ],
      dataList: [],
      searchadvanced: true,
      searchheight: "0",
      isaddflag: "0",
      myhetongid: "",
      interval:5000,
    };
  },
  created() {
    this.getDataList()
  },
  methods: {
    cutout2(cellValue) {
      if (cellValue == 0) {
        return "创建中";
      }
      if (cellValue == 1) {
        return "指标填报中";
      }
      if (cellValue == 2) {
        return "汇总中";
      }
      if (cellValue == 3) {
        return "汇总完成";
      }
      if (cellValue == 4) {
        return "文本审核中";
      }
      if (cellValue == 5) {
        return "文本审核退回";
      }
      if (cellValue == 6) {
        return "文本审核通过";
      }
      if (cellValue == 7) {
        return "受约人审核中";
      }
      if (cellValue == 67) {
        return "受约人驳回";
      }
      if (cellValue == 78) {
        return "绩效考核办公室审核中";
      }
      if (cellValue == 8) {
        return "发约人审核中";
      }
      if (cellValue == 9) {
        return "签订完成";
      }
      if (cellValue == 10) {
        return "履约中";
      }
      if (cellValue == 11) {
        return "结果填报中";
      }
      if (cellValue == 111) {
        return "填报审核驳回";
      }
      if (cellValue == 12) {
        return "结果填报审核中";
      }
      if (cellValue == 13) {
        return "结果汇总完成";
      }
      if (cellValue == 14) {
        return "领导审核中";
      }
      if (cellValue == 15) {
        return "领导审核完成";
      }
      if (cellValue == 16) {
        return "已结束";
      }
    },
    //指标库消失
    kuHidde() {
      this.kuShow = false;
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    close() {
      this.$emit("zhibiaoChild", "关闭");
    },
    getDataList() {

      this.$nextTick(()=>{
        this.mycharts();
      })
      this.dataListLoading = true;
      this.myhetongid = this.hetongId;
      if (this.hetong.contractAuditStatus == 16) {
        this.dfdata = this.hetong.sumZbDf;
      } else {
        this.dfdata = "-";
      }


      getList(this.hetongId).then((response) => {
        this.dataList = response.data.data;
        console.log(JSON.stringify(this.dataList))
      });
      // //console.log("this.dataList:"+JSON.stringify(this.dataList));
      this.dataListLoading = false;
    },
    // 修改属性
    editProperty(row, index) {
      this.$set(this.dataList[index], "isEditPropertyShow", true);
      getFormula().then((res) => {
        this.formulaOptions = res.data.data;
      });
    },
    // 保存属性
    saveProperty(row, index) {
      ////console.log(row);
      putObj(row).then((res) => {
        //刷新列表
        this.getDataList();
      });
    },
    // 取消编辑
    cancelProperty(row, index) {
      this.$set(this.dataList[index], "isEditPropertyShow", false);
      this.getDataList();
    },
    // 删除
    deleteHandle(row) {
      this.$confirm("是否确认删除" + row.zhibiaoName + "指标", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
    },
    showZhibiaoTable() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.zhibiaoRef.getDataList();
      });
    },
    addZhibiao() {
      this.$refs.zhibiaoRef.saveZhibiao();
    },
    getRow(rows) {
      saveZB({ rows: rows, hetongId: this.hetongId }).then((res) => {
        this.dialogVisible = false;
        this.getDataList();
      });
    },
    saveData() {
      saveHtData(this.form).then((res) => {
        this.$message.closeAll();
        this.$message.success("保存成功");
      });
    },
    saveForm(htForm) {
      ////console.log(htForm.contractName);
      this.form = htForm;
    },
    setenter() {
      this.isaddflag = 1;
      this.showZhibiaoTable();
    },
    tongguo(vflag) {
      var that = this;
      this.$confirm("确认要操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return setwbsh(that.form.id, vflag);
        })
        .then((data) => {
          ////console.log(JSON.stringify(data) + "===eee==");
          this.$message.closeAll();
          this.$message.success(data.data.msg);
          this.getDataList();
          this.$emit("zhibiaoChild", "关闭");
        });
    },
    //拆分字段
    cutout(cellValue) {
      if (cellValue) {
        var c = cellValue.split(",");
        if(c.size<1){
          c.push('-');
          c.push('-');
        } else if(c.size<2){
          c.push('-');
        }
        return c;
      }
    },
    //合并
   objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // if (columnIndex === 1 || columnIndex === 0) {
        //   if (rowIndex % 2 === 0) {
        //     return {
        //       rowspan: 2,
        //       colspan: 1
        //     };
        //   } else {
        //     return {
        //       rowspan: 0,
        //       colspan: 0
        //     };
        //   }
        // }
      },
    //导出
    exportExcel() {
      var ids = [];
      ////console.log();
      ids.push(this.hetongId);
      // var data=this.$refs.reftable.selection;
      // if(data.length==0){
      //   this.$message.error("请选择一个合同！");
      //   return;
      // }
      // var ids=[];
      // for(var i=0;i<data.length;i++){
      //   ids.push(data[i].id)
      // }
      var filename = "";
      if (ids.length > 1) {
        filename = "业绩合同查看.zip";
      } else {
        filename = "业绩合同查看" + this.hetong.contractName + ".xlsx";
      }
    console.log(ids.length+"===")
      chakanExportExcel({ ids: ids,type:'htck' }).then((response) => {
        this.$message.closeAll();
        this.$message.success("导出成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
      /*checkSign(ids).then((res) => {
        if (res.data.data == "true") {
          chakanExportExcel({ ids: ids,type:'htck' }).then((response) => {
            this.$message.closeAll();
            this.$message.success("导出成功!");
            let url = window.URL.createObjectURL(new Blob([response.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", filename);
            document.body.appendChild(link);
            link.click();
          });
        } else {
          this.$message.closeAll();
          this.$message.error(res.data.data);
        }
      });*/

      // chakanExportExcel({
      //   ids:ids,
      //   type:'htck'
      //   }).then(response => {
      //   this.$message.success('导出成功!')
      //   let url = window.URL.createObjectURL(new Blob([response.data]));
      //   let link = document.createElement("a");
      //   link.style.display = "none";
      //   link.href = url;
      //   link.setAttribute("download", filename);
      //   document.body.appendChild(link);
      //   link.click();
      // })

    },
    mycharts(){
       // let myChart =echarts.init(this.$refs.charts,"macarons");
      //柱状图
        var chartDom = document.getElementById('ckecharts');
        var myChart = echarts.init(chartDom,{
            width: 350,
            height: 150,
        });
        var option;
      option = {
       title: {
                text: '历史成绩对比'
            },
            tooltip: {},
            legend: {
                data:['指标']
            },
          color:['#173198'],
            xAxis: {
                data: ["2020","2021","2022"]
            },
            yAxis: {},
            series: [{
                barWidth : 40,
                name: '成绩',
                type: 'bar',
              itemStyle:{
                  normal:{
                    label:{
                      show:true,
                      position:'top'
                    }
                  }
              },
                data: [85, 88, 93]
            }]

      };
      option && myChart.setOption(option);
      //折线图
      var linechartsDom = document.getElementById('linecharts');
      var lineChart = echarts.init(linechartsDom,{
        width: 350,
        height: 150,
      });
      var lineOption = {
        title: {
          text: '同层级排名'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}年<br>{a}&nbsp;{c}',
          showContent: true
        },
        color:['#173198'],
        xAxis: {
          data: ["2020","2021","2022"]
        },
        yAxis: {},
        series: [{
          name: '同级排名',
          type: 'line',
          smooth:true,
          smoothMonotone: 'x',
          emphasis: { focus: 'series' },
          itemStyle:{
            normal:{
              label:{
                show:true,
                position:'top'
              }
            }
          },
          data: [35, 50, 43]
        }]

      };
      lineOption && lineChart.setOption(lineOption);
      //饼图
      var piechartsDom = document.getElementById('piecharts');
      var pieChart = echarts.init(piechartsDom,{
        width: 450,
        height: 150,
      });
      var pieOption = {
        tooltip: {
          trigger: 'item',
        },
        title: {
          text: '指标完成值对比'
        },
        legend: {
          data:['11']
        },
        series: [
          {
            name: '完成值',
            type: 'pie',
            radius: '100%',
            center: ['50%', '90%'],
            label: {
              normal:{
                show:true,
                formatter:'{b}\n{@2020}个'
              },
            },
            color:["#6c7e9c",'#6adbaf','#0e258c','#f6c32d','#6495ed','#432871'],
            data: [
              { value: 1, name: '-1分' },
              { value: 37, name: '完成值100%' },
              { value: 49, name: '+1分' },
              { value: 5, name: '+3分' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieOption && pieChart.setOption(pieOption);

    }
  },
};
</script>

<style>
.zhibiaoHead {
  border: 1px solid grey;
  text-align: center;
  line-height: 30px;
}
.check_header{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.portrait{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f7fa;
}
.portrait img{
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.defen{
  width: 300px;
  height: 150px;
  font-size:60px;
  line-height: 200px;
  text-align: center;
  margin-bottom: 20px;
}
.righttop{
    width: 400px;
	  height: 250px;
}
.con_1{
  height: 40px;
  line-height: 30px;
  font-size: 18px;
  display: flex;
  justify-content: flex-start;
}
.box_check .el-table th{
  background:#f2f2f2 !important;
}
/*图标轮播样式*/
.zhibiao-carousel-box .el-carousel__container{
  height: 230px!important;
}
.zhibiao-carousel-box .el-carousel__item div {
  color: #475669;
  font-size: 18px;
  margin: 0;
}
.zhibiao-carousel-box .el-carousel__button{
  width: 15px;
  height: 15px;
  border-radius: 100px;
}
</style>
